<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<link rel="stylesheet" type="text/css" href="../resources/cola-ui/semantic.css">
	<link rel="stylesheet" type="text/css" href="../resources/cola-ui/cola.css">
	<title>Button</title>
	<script src="../resources/jquery-2.1.3.js"></script>
	<script src="../resources/cola-ui/3rd.js"></script>
	<script src="../resources/cola-ui/semantic.js"></script>
	<script src="../resources/cola-ui/cola.js"></script>
	<script src="../resources/cola-ui/i18n/zh/cola.js"></script>
	<script type="text/javascript">
		cola(function (model) {
			model.describe("login", {
				dataType: {
					properties: {
						user: {
							validators: "required"
						},
						password: {
							validators: "required"
						}
					}
				}
			});

			model.set("login", {
				user: "Mike"
			});

			model.action({
				login: function() {
					var loginInfo = model.get("login");
					debugger;
				}
			});
		});
	</script>
</head>
<body style="padding: 1em">
	<c-form>
		<div class="field">
			<label>用户名</label>
			<c-input bind="login.user" placeholder="用户名">
		</div>
		<div class="field">
			<label>密码</label>
			<c-input bind="login.password" inputType="password">
		</div>
		<c-button caption="登录" c-onclick="login()"></c-button>
	</c-form>
</body>
</html>
